status/network: Tweak connection items

Always use the plain name as label, and indicate the "(dis)connect"
action in a subtitle.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2631>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 52fcf6bc459fef798eec1753948662e1a9620aa8..58f3db34bc22279a3ccfa6b91d5e7551606bcb88 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -122,3 +122,5 @@
 .nm-network-item {
   .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
 }
+
+.device-subtitle { color: transparentize($fg_color, 0.5); }

diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index d3297a50486a4c0d8e775f75c9e9ad3da7d5dfb7..13f297477d7bbdc0154776cc8c6e8f5da351b464 100644 (file)
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -305,11 +305,18 @@ class NMConnectionItem extends NMMenuItem {
         this.add_child(this._icon);
 
         this._label = new St.Label({
+            x_expand: true,
             y_expand: true,
             y_align: Clutter.ActorAlign.CENTER,
         });
         this.add_child(this._label);
-        this.label_actor = this._label;
+
+        this._subtitle = new St.Label({
+            style_class: 'device-subtitle',
+            y_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        this.add_child(this._subtitle);
 
         this.bind_property('icon-name',
             this._icon, 'icon-name',
@@ -350,7 +357,7 @@ class NMConnectionItem extends NMMenuItem {
             ? PopupMenu.Ornament.DOT : PopupMenu.Ornament.NONE);
     }
 
-    _getRegularLabel() {
+    _getAccessibleName() {
         return this.is_active
             // Translators: %s is a device name like "MyPhone"
             ? _('Disconnect %s').format(this.name)
@@ -358,12 +365,20 @@ class NMConnectionItem extends NMMenuItem {
             : _('Connect to %s').format(this.name);
     }
 
+    _getSubtitleLabel() {
+        return this.is_active ? _('Disconnect') : _('Connect');
+    }
+
     _sync() {
+        this._label.text = this.name;
+
         if (this.radioMode) {
-            this._label.text = this.name;
+            this._subtitle.text = null;
+            this.accessible_name = this.name;
             this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         } else {
-            this._label.text = this._getRegularLabel();
+            this.accessible_name = this._getAccessibleName();
+            this._subtitle.text = this._getSubtitleLabel();
             this.accessible_role = Atk.Role.MENU_ITEM;
         }
         this._updateOrnament();